<template>
	<view class="tab-container">
		<view class="tab-box">
			<scroll-view scroll-x class="scroll-view" :scroll-left="scrollLeft" scroll-with-animation>
				<view class="scroll-content">
					<view class="tab-item-box">
						<block v-for="(item,index) in tabData" :key="index">
							<view :id="'_tab_'+index" @click="indexupd(index)" class="tab-item"
								:class="{'tab-item-active':activeIndex===index}"
								:style="{color:activeIndex===index? defaultConfig.activeTextColor:defaultConfig.textColor}">
								{{item.label}}
							</view>
						</block>
					</view>
					<view class="underLine" :style="{
						transform: 'translateX('+ slider.left +'px)',
						width:defaultConfig.underLineWidth+'px',
						height:defaultConfig.underLineHeight+'px',
						backgroundColor:defaultConfig.underLineColor
						}">
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "my-tabs",
		props: {
			// 配置对象
			config: {
				type: Object,
				// default如果是复杂数据类型，那么需要指定 value 为一个函数，通过 返回值的形式执行默认值
				default: () => {
					return {}
				}
			},
			tabData: {
				type: Array,
				default: () => {
					return {}
				}
			},
			defaultIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				tabList: [],
				activeIndex: -1,
				// 滑块
				slider: {
					left: 0
				},
				defaultConfig: {
					textColor: '#333333',
					activeTextColor: '#f94d2a',
					underLineWidth: 24,
					underLineHeight: 2,
					underLineColor: '#f94d2a'
				},
				scrollLeft: 0
			};
		},
		methods: {
			updataTabWidth() {
				let data = this.tabList
				if (data.length === 0) return;
				const query = uni.createSelectorQuery().in(this)

				data.forEach((item, index) => {
					query
						.select('#_tab_' + index)
						.boundingClientRect((res) => {
							item._slider = {
								left: res.left + (res.width - this.defaultConfig.underLineWidth) / 2
							}
							if (data.length - 1 === index) {
								this.tabToIndex()
							}
						})
						.exec()
				})
			},
			indexupd(index) {
				this.activeIndex = index

				// 发送一个通知，通知表示激活项发生变化了
				this.$emit('tabClick', index)
			},
			tabToIndex() {
				if (this.tabList.length === 0) return;
				const index = this.activeIndex
				this.slider = {
					//tabItem的宽度、tabItem的 left、slider的 width
					// left = tabItem.left + (tabItem.width - slider.width) / 2
					left: this.tabList[index]._slider.left
				}
				this.scrollLeft = this.activeIndex * this.defaultConfig.underLineWidth
			}
		},
		// 监听器
		watch: {
			config: {
				// 当 config 发生变化时，回调的方法
				handler(val) {
					this.defaultConfig = {
						...this.defaultConfig,
						...val
					};
					this.tabToIndex()
				},
				// 当前的 handler 回调将会在监听开始之后立即被调用
				immediate: true
			},
			// 监听 tabData 的变化
			tabData: {
				// 当 tabData 发生变化时，回调的方法
				handler(val) {
					this.tabList = val

					setTimeout(() => {
						this.updataTabWidth()
					}, 0)
				},
				// 当前的 handler 回调将会在监听开始之后立即被调用
				immediate: true
			},
			// 监听激活项的变化
			defaultIndex: {
				// 当 defaultIndex 发生变化时，回调的方法
				handler(val) {
					this.activeIndex = val
					this.tabToIndex()
				},
				// 当前的 handler 回调将会在监听开始之后立即被调用
				immediate: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-container {
		font-size: $uni-font-size-base;
		height: 45px;
		line-height: 45px;
		background-color: $uni-bg-color;

		.tab-box {
			width: 100%;
			height: 45px;
			display: flex;
			position: relative;

			.scroll-view {
				white-space: nowrap;
				width: 100%;
				height: 100%;
				box-sizing: border-box;

				.scroll-content {
					width: 100%;
					height: 100%;
					position: relative;

					.tab-item-box {
						height: 100%;

						.tab-item {
							height: 100%;
							display: inline-block;
							text-align: center;
							padding: 0 15px;
							position: relative;
							color: $uni-text-color;

							&-active {
								color: $uni-text-color-hot;
							}
						}
					}

					.underLine {
						height: 2px;
						width: 24px;
						background-color: $uni-text-color-hot;
						border-radius: 3px;
						transition: .5s;
						position: absolute;
						bottom: 0;
					}
				}

			}
		}
	}

	/* #ifdef H5 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none;
	}

	/deep/.uni-scroll-view {
		scrollbar-width: none;
	}

	/* #endif */
</style>
